import { defineComponent, PropType, computed, ref } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import { IModal } from '@ibiz-template/runtime';
import './image-preview.scss';

export const ImagePreview = defineComponent({
  props: {
    modal: { type: Object as PropType<IModal>, required: true },
    file: { type: Object as PropType<IParams>, required: true },
  },
  setup(props) {
    const ns = useNamespace('image-preview-modal');
    const loading = ref(true);

    const imageUrl = computed(() => {
      const { file } = props;
      if (!file) return '';
      return file.base64 || file.url || '';
    });
    const onLoad = (): void => {
      loading.value = false;
    };

    return {
      ns,
      loading,
      imageUrl,
      onLoad,
    };
  },
  render() {
    return (
      <div class={this.ns.b()} v-loading={this.loading}>
        <div class={this.ns.e('container')}>
          <img src={this.imageUrl} alt='--' onLoad={this.onLoad}></img>
        </div>
      </div>
    );
  },
});
